<template>
  <el-dialog title="高级检索" :visible.sync="show">
    <el-form label-position="top" :inline="true" :model="dataForm" class="advancedform">

      <el-form-item label="逻辑组合" prop="logicvalue">
        <el-select v-model="dataForm.logicvalue" style="width: 120px;" placeholder="">
          <el-option
            v-for="logicitem in logic"
            :key="logicitem.value"
            :label="logicitem.label"
            :value="logicitem.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="域(检索字段)" prop="field">
        <el-select v-model="dataForm.field" style="width: 160px;" placeholder="">

          <el-option
            v-for="fielditem in queryfield"
            :key="fielditem.value"
            :label="fielditem.label"
            :value="fielditem.value"
            @click.native="changequerytxt(fielditem)"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="检索方式" prop="relationvalue">
        <el-select v-model="dataForm.relationvalue" style="width: 120px;" placeholder="">
          <el-option
            v-for="relationitem in relation"
            :key="relationitem.value"
            :label="relationitem.label"
            :value="relationitem.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item v-if="dataForm.txtcount===1" label="域值(检索内容)">
        <el-date-picker
          v-if="dataForm.inputtype==='date'"
          v-model="dataForm.value"
          type="date"
          placeholder="检索日期"
        />
        <el-select v-else-if="dataForm.inputtype==='select'" v-model="dataForm.value1" placeholder="请选择检索内容">
          <el-option
            v-for="item in selectcontent"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-input v-else v-model="dataForm.value1" placeholder="检索内容" />
      </el-form-item>
      <div v-else style="display: inline;">
        <el-form-item v-if="dataForm.inputtype==='date'" label="域值(检索内容)">
          <el-date-picker
            v-model="dataForm.daterange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <div v-else style="display: inline;">
          <el-form-item label="检索起始值">
            <el-input v-model="dataForm.value1" style="width: 225px;" placeholder="" />
          </el-form-item>

          <el-form-item label="检索终止值">
            <el-input v-model="dataForm.value2" style="width: 225px;" placeholder="" />
          </el-form-item>
        </div>
      </div>

      <br>
      <div style="float:right">
        <el-form-item>
          <el-checkbox v-model="isReverse" style="margin-right:20px;">结果取反</el-checkbox>
          <el-button size="mini" type="primary" @click="savequery">添加条件</el-button>
          <el-button size="mini" type="primary" @click="clearquery">清空条件</el-button>
        </el-form-item>
      </div>
      <el-table height="250" :data="queryTable" style="width: 100%" empty-text="暂无条件记录">
        <el-table-column
          prop="logic"
          label="逻辑组合"
          width="180"
        />
        <el-table-column
          prop="field"
          label="域(检索字段)"
          width="180"
        />
        <el-table-column
          prop="relation"
          label="检索方式"
        />
        <el-table-column
          prop="value1"
          label="值1"
        />
        <el-table-column
          prop="value2"
          label="值2"
        />
      </el-table>

      <br>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="mini" @click="show = false">取消</el-button>
      <el-button size="mini" type="primary" @click="onSearch('btn')">查询</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { selectgroup } from '@/api/selectdata.js'
import { codetoword } from '@/utils/codechangefortb.js'
export default {
  props: {
    queryfield: { // 具体检索字段 由使用该组件的页面传过来
      type: Array,
      default: () => []
    },
    dataForm: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      relation: [
        { // 高级检索的检索方式在组件里定义好了
          value: 'eq',
          label: '等于'
        },
        {
          value: 'st', // 结束是ed
          label: '起始'
        },
        {
          value: 'in',
          label: '包含'
        }
      ],
      logic: [
        { // 高级检索的逻辑组合在组件里定义好了
          value: 'and',
          label: '并且'
        },
        {
          value: 'or',
          label: '或者'
        },
        {
          value: 'not',
          label: '不是'
        }
      ],
      show: false, // 默认高级检索隐藏
      isReverse: false, // 默认不反选
      condition: [], // 放各个查询条件
      queryTable: [] // 放展示查询条件的文本内容

    }
  },
  methods: {
    open() {
      this.show = true
    },
    changequerytxt(fielditem) { // 检索字段变更，后续选择框、文本框跟着变动
      this.dataForm.value1 = ''
      this.dataForm.value2 = '' // 每次先清空原值
      this.dataForm.type = fielditem.type // 是C  N...
      switch (fielditem.type) { // 不同的字段类型，展示不同的默认检索方式
        case 'C':
          this.dataForm.relationvalue = 'in'
          break
        case 'N':
          this.dataForm.relationvalue = 'eq'
          break
        case 'D':
          this.dataForm.relationvalue = 'st'
          break
        default:
      }
      this.dataForm.txtcount = (fielditem.txtType === 1) ? 1 : 2 // 控制显示几个文本框
      this.dataForm.inputtype = fielditem.inputtype // 控制展示什么类型的input组件
      this.selectcontent = selectgroup[this.dataForm.field]
    },
    findlabel(arr, value) {
      // 保存选中select的label文本内容
      let obj = {}
      if (value !== '') { // select有选值，才返回对象；否则返回为空
        obj = arr.find(item => {
          return item.value === value
        })
      }
      return obj.label || ''
    },
    savequery() { // 保存条件
      const obj = {
        logic: this.findlabel(this.logic, this.dataForm.logicvalue),
        field: this.findlabel(this.queryfield, this.dataForm.field),
        relation: this.findlabel(this.relation, this.dataForm.relationvalue),
        value1: codetoword(this.dataForm.field, this.dataForm.value1),
        value2: codetoword(this.dataForm.field, this.dataForm.value2)
      }
      this.queryTable.push(obj)

      const objcondition = { // 复杂查询的查询条件
        ...this.dataForm,
        relation: this.dataForm.relationvalue,
        logic: this.dataForm.logicvalue
      }
      this.condition.push(objcondition)
    },
    clearquery() {
      this.queryTable = []
      this.condition = []
    },
    async onSearch(type) { // 检索
      let querydata = []
      if (this.condition.length === 0) { // 条件没有被记录的时候
        querydata = {
          isReverse: this.isReverse,
          condition: [
            {
              ...this.dataForm,
              relation: this.dataForm.relationvalue,
              logic: this.dataForm.logicvalue
            }
          ]
        }
      } else { // 条件被记录下来的时候
        querydata = {
          isReverse: this.isReverse,
          condition: this.condition
        }
      }

      this.$emit('onSearch', querydata, type)
      this.show = false
    }
  }
}
</script>

<style scoped lang="scss">
  .advancedform{
  ::v-deep .el-form-item__label{
  line-height:10px;
}
}
</style>

